<template>
  <div class="num">
      <div class="contain">
         <div class="title">截止{{covNum.createTime | dataFormat}}全国疫情数据统计</div>
         <ul class="warp">
             <li>
                 <span>较昨日{{covNum.currentConfirmedIncr |number}}</span>
                 <div class="bold">{{covNum.currentConfirmedCount}}</div>
                 <strong>现存确诊</strong>
             </li>
             <li>
                 <span>较昨日{{covNum.suspectedIncr |number}}</span>
                 <div class="bold">{{covNum.suspectedCount}}</div>
                 <strong>境外输入</strong>
             </li>
             <li>
                 <span>较昨日{{covNum.seriousIncr |number}}</span>
                 <div class="bold">{{covNum.seriousCount}}</div>
                 <strong>现存无症状</strong>
             </li>
             <li>
                 <span>较昨日{{covNum.confirmedIncr |number}}</span>
                 <div class="bold">{{covNum.confirmedCount}}</div>
                 <strong>累计确诊</strong>
             </li>
             <li>
                 <span>较昨日{{covNum.deadIncr |number}}</span>
                 <div class="bold">{{covNum.deadCount}}</div>
                 <strong>累计死亡</strong>
             </li>
             <li>
                 <span>较昨日{{covNum.curedIncr |number}}</span>
                 <div class="bold">{{covNum.curedCount}}</div>
                 <strong>累计治愈</strong>
             </li>
         </ul>
      </div>
      
  </div>
</template>

<script>

export default {
    props:{
        covNum:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
    filters:{
        number:function(val){
            if(val>0){
                return val ='+' + val
            }else{
                return val
            }
        }
    }
}
</script>

<style scoped>
.num{
    background-color: #f5f5f5;
    padding-top: 0.3rem;
}
.contain{
    background-color: white;
    padding: 0.2rem;
    min-height: 2rem;
}
.title{
    font-size: 0.22rem;
    color: #666;
    margin-bottom: 0.2rem;
}
.warp{
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 0 5px #999;
    border-radius: 0.1rem;
    padding-top: 0.1rem;
}
.warp li{
    font-size: 0.25rem;
    width: 33.3%;
    text-align: center;
    margin-bottom: 0.2rem;
}
.bold{
    font-weight: bold;
}
.warp li:nth-child(1) .bold{
    color: red;
}
.warp li:nth-child(2) .bold{
    color: green;
}
.warp li:nth-child(3) .bold{
    color: orange;
}
.warp li:nth-child(4) .bold{
    color: purple;
}
.warp li:nth-child(5) .bold{
    color: green;
}
.warp li:nth-child(6) .bold{
    color: skyblue;
}
</style>